import React from "react";
import { Collapse } from "antd";
import { PenChildProps } from "@/types";
import { PositionAndSize } from "@/components/Configuration/PenProps/components/PositionAndSize.tsx";
import { PenStyle } from "@/components/Configuration/PenProps/components/PenStyle.tsx";
import { PenText } from "@/components/Configuration/PenProps/components/PenText.tsx";
import { PenImg } from "@/components/Configuration/PenProps/components/PenImg.tsx";
import { PenIconFont } from "@/components/Configuration/PenProps/components/PenIconFont.tsx";
import { PenDisabled } from "@/components/Configuration/PenProps/components/PenDisabled.tsx";
import { PenLinePosition } from "@/components/Configuration/PenProps/components/PenLinePosition.tsx";

export function Appearance(props: PenChildProps) {
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };

  return (
    <>
      {props.penOptions.type == undefined && (
        <Collapse
          style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
          items={[
            {
              key: "positionAndSize",
              label: "位置和大小",
              children: <PositionAndSize {...props} />,
              style: panelStyle,
            },
          ]}
          defaultActiveKey={["positionAndSize"]}
        />
      )}
      {props.penOptions.type == 1 && (
        <Collapse
          style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
          items={[
            {
              key: "PenLinePosition",
              label: "位置",
              children: <PenLinePosition {...props} />,
              style: panelStyle,
            },
          ]}
          defaultActiveKey={["PenLinePosition"]}
        />
      )}
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={[
          {
            key: "penStyle",
            label: "样式",
            children: <PenStyle {...props} />,
            style: panelStyle,
          },
          {
            key: "penText",
            label: "文字",
            children: <PenText {...props} />,
            style: panelStyle,
          },
          {
            key: "penImg",
            label: "图片",
            children: <PenImg {...props} />,
            style: panelStyle,
          },
          {
            key: "penIconFont",
            label: "字体图标",
            children: <PenIconFont {...props} />,
            style: panelStyle,
          },
          {
            key: "penDisabled",
            label: "禁止",
            children: <PenDisabled {...props} />,
            style: panelStyle,
          },
        ]}
        defaultActiveKey={[
          "penText",
          "penStyle",
          "penImg",
          "penIconFont",
          "penDisabled",
        ]}
      />
    </>
  );
}
